<div class="docs-nav" id="docs-menu">

<!--
  <ul class="docs-nav-version-container">
    <li class="docs-nav-version">
      <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">Changelog</a>
    </li>
  </ul>
-->

  <ul class="accordion docs-nav-category" data-accordion data-allow-all-closed="true" data-multi-expand="true">
    <a class="docs-expand-all" data-expand-all="true"></a>
    <li class="accordion-item {{#ifpage 'index' 'installation' 'starter-projects' 'compatibility' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">开始</a>
      <div class="accordion-content {{#ifpage 'index' 'installation' 'starter-projects' 'compatibility' 'accessibility' 'kitchen-sink'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'index'}} class="current"{{/ifpage}}><a href="index.html">欢迎</a></li>
          <li{{#ifpage 'installation'}} class="current"{{/ifpage}}><a href="installation.html">安装</a></li>
          <li{{#ifpage 'starter-projects'}} class="current"{{/ifpage}}><a href="starter-projects.html">启动项目</a></li>
          <li{{#ifpage 'compatibility'}} class="current"{{/ifpage}}><a href="compatibility.html">兼容性</a></li>
          <li{{#ifpage 'accessibility'}} class="current"{{/ifpage}}><a href="accessibility.html">辅助功能</a></li>
          <li{{#ifpage 'kitchen-sink'}} class="current"{{/ifpage}}><a href="kitchen-sink.html">完整示例</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'global' 'rtl' 'flexbox' 'sass' 'javascript' 'javascript-utilities' 'media-queries'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">设置</a>
      <div class="accordion-content {{#ifpage 'global' 'rtl' 'flexbox' 'sass' 'javascript' 'javascript-utilities' 'media-queries'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'global'}} class="current"{{/ifpage}}><a href="global.html">全局样式</a></li>
          <li{{#ifpage 'rtl'}} class="current"{{/ifpage}}><a href="rtl.html">右到左支持</a></li>
          <li{{#ifpage 'flexbox-mode'}} class="current"{{/ifpage}}><a href="flexbox-mode.html">Flexbox模式</a></li>
          <li{{#ifpage 'sass'}} class="current"{{/ifpage}}><a href="sass.html">Sass</a></li>
          <li{{#ifpage 'javascript'}} class="current"{{/ifpage}}><a href="javascript.html">JavaScript</a></li>
          <li{{#ifpage 'javascript-utilities'}} class="current"{{/ifpage}}><a href="javascript-utilities.html">JavaScript工具</a></li>
          <li{{#ifpage 'media-queries'}} class="current"{{/ifpage}}><a href="media-queries.html">媒体查询</a> <span class="label">JS</span></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'xy-grid' 'grid' 'flex-grid' 'forms'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">常规</a>
      <div class="accordion-content {{#ifpage 'xy-grid' 'grid' 'flex-grid' 'forms'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'xy-grid'}} class="current"{{/ifpage}}><a href="xy-grid.html">XY网格 <span class="label">新</span></a></li>
          <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">栅格网格<span class="label">传统</span></a></li>
          <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex网格<span class="label">传统</span></a></li>
          <li{{#ifpage 'forms'}} class="current"{{/ifpage}}><a href="forms.html">表单</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'prototyping-utilities' 'flexbox-utilities' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">工具</a>
      <div class="accordion-content {{#ifpage 'prototyping-utilities' 'flexbox-utilities' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'prototyping-utilities'}} class="current"{{/ifpage}}><a href="prototyping-utilities.html">原型工具</a></li>
          <li{{#ifpage 'flexbox-utilities'}} class="current"{{/ifpage}}><a href="flexbox-utilities.html">Flexbox工具</a></li>
          <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility类</a></li>
          <li{{#ifpage 'float-classes'}} class="current"{{/ifpage}}><a href="float-classes.html">浮动类</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'typography-base' 'typography-helpers'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">排版</a>
      <div class="accordion-content {{#ifpage 'typography-base' 'typography-helpers'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'typography-base'}} class="current"{{/ifpage}}><a href="typography-base.html">基本样式</a></li>
          <li{{#ifpage 'typography-helpers'}} class="current"{{/ifpage}}><a href="typography-helpers.html">Helper类</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'button' 'button-group' 'close-button' 'slider' 'switch'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">控件</a>
      <div class="accordion-content {{#ifpage 'button' 'button-group' 'close-button' 'slider' 'switch'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'button'}} class="current"{{/ifpage}}><a href="button.html">按钮</a></li>
          <li{{#ifpage 'button-group'}} class="current"{{/ifpage}}><a href="button-group.html">安装组合</a></li>
          <li{{#ifpage 'close-button'}} class="current"{{/ifpage}}><a href="close-button.html">关闭按钮</a></li>
          <li{{#ifpage 'slider'}} class="current"{{/ifpage}}><a href="slider.html">按钮滑块 <span class="label">JS</span></a></li>
          <li{{#ifpage 'switch'}} class="current"{{/ifpage}}><a href="switch.html">按钮开关</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'navigation' 'menu' 'dropdown-menu' 'drilldown-menu' 'accordion-menu' 'top-bar' 'responsive-navigation' 'magellan' 'pagination' 'breadcrumbs'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">导航</a>
      <div class="accordion-content {{#ifpage 'navigation' 'menu' 'dropdown-menu' 'drilldown-menu' 'accordion-menu' 'top-bar' 'responsive-navigation' 'magellan' 'pagination' 'breadcrumbs'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'menu'}} class="current"{{/ifpage}}><a href="menu.html">菜单</a></li>
          <li{{#ifpage 'dropdown-menu'}} class="current"{{/ifpage}}><a href="dropdown-menu.html">下拉菜单 <span class="label">JS</span></a></li>
          <li{{#ifpage 'drilldown-menu'}} class="current"{{/ifpage}}><a href="drilldown-menu.html">钻取菜单<span class="label">JS</span></a></li>
          <li{{#ifpage 'accordion-menu'}} class="current"{{/ifpage}}><a href="accordion-menu.html">折叠菜单 <span class="label">JS</span></a></li>
          <li{{#ifpage 'top-bar'}} class="current"{{/ifpage}}><a href="top-bar.html">顶栏</a></li>
          <li{{#ifpage 'responsive-navigation'}} class="current"{{/ifpage}}><a href="responsive-navigation.html">响应式导航</a></li>
          <li{{#ifpage 'magellan'}} class="current"{{/ifpage}}><a href="magellan.html">固定菜单<span class="label">JS</span></a></li>
          <li{{#ifpage 'pagination'}} class="current"{{/ifpage}}><a href="pagination.html">分页菜单</a></li>
          <li{{#ifpage 'breadcrumbs'}} class="current"{{/ifpage}}><a href="breadcrumbs.html">面包屑</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">容器</a>
      <div class="accordion-content {{#ifpage 'accordion' 'callout' 'card' 'dropdown' 'media-object' 'off-canvas' 'reveal' 'table' 'tabs' 'responsive-accordion-tabs'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'accordion'}} class="current"{{/ifpage}}><a href="accordion.html">折叠菜单<span class="label">JS</span></a></li>
          <li{{#ifpage 'callout'}} class="current"{{/ifpage}}><a href="callout.html">标注</a></li>
          <li{{#ifpage 'card'}} class="current"{{/ifpage}}><a href="card.html">卡片</a></li>
          <li{{#ifpage 'dropdown'}} class="current"{{/ifpage}}><a href="dropdown.html">下拉<span class="label">JS</span></a></li>
          <li{{#ifpage 'media-object'}} class="current"{{/ifpage}}><a href="media-object.html">媒体对象</a></li>
          <li{{#ifpage 'off-canvas'}} class="current"{{/ifpage}}><a href="off-canvas.html">侧滑菜单<span class="label">JS</span></a></li>
          <li{{#ifpage 'reveal'}} class="current"{{/ifpage}}><a href="reveal.html">弹出<span class="label">JS</span> <small>模态窗口</small></a></li>
          <li{{#ifpage 'table'}} class="current"{{/ifpage}}><a href="table.html">表格</a></li>
          <li{{#ifpage 'tabs'}} class="current"{{/ifpage}}><a href="tabs.html">选项卡 <span class="label">JS</span></a></li>
          <li{{#ifpage 'responsive-accordion-tabs'}} class="current"{{/ifpage}}><a href="responsive-accordion-tabs.html">响应式选项卡<span class="label">JS</span></a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'badge' 'responsive-embed' 'label' 'orbit' 'progress-bar' 'thumbnail' 'tooltip'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">媒体</a>
      <div class="accordion-content {{#ifpage 'badge' 'responsive-embed' 'label' 'orbit' 'progress-bar' 'thumbnail' 'tooltip'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">徽章</a></li>
          <li{{#ifpage 'responsive-embed'}} class="current"{{/ifpage}}><a href="responsive-embed.html">响应嵌入</a></li>
          <li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">标签</a></li>
          <li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">幻灯片<span class="label">JS</span> <small>轮播</small></a></li>
          <li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">进度条</a></li>
          <li{{#ifpage 'thumbnail'}} class="current"{{/ifpage}}><a href="thumbnail.html">缩略图</a></li>
          <li{{#ifpage 'tooltip'}} class="current"{{/ifpage}}><a href="tooltip.html">提示<span class="label">JS</span></a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'abide' 'equalizer' 'interchange' 'toggler' 'smooth-scroll' 'sticky'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">插件</a>
      <div class="accordion-content {{#ifpage 'abide' 'equalizer' 'interchange' 'toggler' 'smooth-scroll' 'sticky'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'abide'}} class="current"{{/ifpage}}><a href="abide.html">Abide <small>表单验证</small></a></li>
          <li{{#ifpage 'equalizer'}} class="current"{{/ifpage}}><a href="equalizer.html">Equalizer <small>Column Alignment</small></a></li>
          <li{{#ifpage 'interchange'}} class="current"{{/ifpage}}><a href="interchange.html">Interchange <small>Responsive Content</small></a></li>
          <li{{#ifpage 'toggler'}} class="current"{{/ifpage}}><a href="toggler.html">Toggler <small>CSS Helper</small></a></li>
          <li{{#ifpage 'smooth-scroll'}} class="current"{{/ifpage}}><a href="smooth-scroll.html">Smooth Scroll <small>Navigation</small></a></li>
          <li{{#ifpage 'sticky'}} class="current"{{/ifpage}}><a href="sticky.html">Sticky <small>Header/Sidebar</small></a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'sass-functions' 'sass-mixins'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">Sass</a>
      <div class="accordion-content {{#ifpage 'sass-functions' 'sass-mixins'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'sass-functions'}} class="current"{{/ifpage}}><a href="sass-functions.html">Functions</a></li>
          <li{{#ifpage 'sass-mixins'}} class="current"{{/ifpage}}><a href="sass-mixins.html">混合器</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item {{#ifpage 'motion-ui' 'panini' 'style-sherpa'}}is-active{{/ifpage}}" data-accordion-item>
      <a href="#" class="accordion-title">库</a>
      <div class="accordion-content {{#ifpage 'motion-ui' 'panini' 'style-sherpa'}}is-active{{/ifpage}}" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li{{#ifpage 'motion-ui'}} class="current"{{/ifpage}}><a href="motion-ui.html">Motion UI</a></li>
          <li{{#ifpage 'panini'}} class="current"{{/ifpage}}><a href="panini.html">Panini</a></li>
          <li{{#ifpage 'style-sherpa'}} class="current"{{/ifpage}}><a href="style-sherpa.html">Style Sherpa</a></li>
        </ul>
      </div>
    </li>

    <li class="accordion-item" data-accordion-item>
      <a href="#" class="accordion-title">旧版本</a>
      <div class="accordion-content" data-tab-content>
        <ul class="docs-nav-subcategory">
          <li><a href="http://foundation.zurb.com/sites/docs/v/5.5.3/index.html">Foundation 5</a></li>
          <li><a href="http://foundation.zurb.com/sites/docs/v/4.3.2/index.html">Foundation 4</a></li>
          <li><a href="http://foundation.zurb.com/sites/docs/v/3.2.5/">Foundation 3</a></li>
          <li><a href="http://foundation.zurb.com/sites/docs/v/2.2.1/">Foundation 2</a></li>
        </ul>
      </div>
    </li>

  </ul>

</div>
